<template>
    <div id="setting-box">
        <div id="setting-penal">
<!--            <div class="setting-item">-->
<!--                <span>宽度：</span>-->
<!--                <input type="text" v-model="bindConfig.weight">-->
<!--            </div>-->
<!--            <div class="setting-item">-->
<!--                <span>高度：</span>-->
<!--                <input type="text" v-model="bindConfig.height">-->
<!--            </div>-->
<!--            <div class="setting-item">-->
<!--                <span>字号：</span>-->
<!--                <input type="text" v-model="bindConfig.fontSize">-->
<!--            </div>-->
<!--            <div class="setting-item">-->
<!--                <button @click="save">保存设置</button>-->
<!--            </div>-->

          <el-form>
            <el-form-item label="宽度" label-width="80px">
              <el-input v-model="config.weight"></el-input>
            </el-form-item>
            <el-form-item label="高度" label-width="80px">
              <el-input v-model="config.height"></el-input>
            </el-form-item>
            <el-form-item label="字号" label-width="80px">
              <el-input v-model="config.fontSize"></el-input>
            </el-form-item>
            <el-form-item label="上翻步进" label-width="80px">
              <el-input v-model="config.upStep"></el-input>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-button @click="callAutoResize">自动匹配大小</el-button>
            </el-form-item>
            <el-form-item label-width="80px">
              <el-button type="primary" @click="save">保存</el-button>
            </el-form-item>
          </el-form>
        </div>
    </div>
</template>
<script>
export default {
  name: 'Setting',
  props: {
    config: Object
  },
  data () {
    return {
      bindConfig: this.config
    }
  },
  methods: {
    save () {
      this.$emit('save', this.config)
    },

    callAutoResize () {
      this.$emit('autoResize')
    }
  }
}
</script>
<style scoped>
#setting-box {
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0,0,0, 0.3);
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#setting-penal {
    background-color: #ffffff;
    padding: 20px 40px;
    border-radius: 5px;
}

.setting-item {
    margin: 20px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>